<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header" style="display: flex;justify-content: space-between;">
        <div>预约展览图片</div>
       <div>
        <el-button
          type="primary"
          :icon="show_pic_static?'el-icon-edit':'el-icon-check'"
          circle
          @click="show_pic_static?  show_pic() : save_img()"
        ></el-button>
        <el-button
        v-if="!show_pic_static"
          type="danger"
          :icon="'el-icon-close'"
          circle
          @click="show_pic"
        ></el-button>
       </div>
      </div>
      <el-image
        style="width: 350px; height: 180px"
        :src="showswiper[0]"
        fit="fit"
        v-show="show_pic_static"
      ></el-image>
      <el-upload
        class="upload-demo"
        drag
        list-type="picture"
        :limit="1"
        action="https://zyc618.mynatapp.cc/api/files/uploads"
        :on-success="handleAvatarSuccess_img"
        multiple
        v-show="!show_pic_static"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将封面图片拖到此处，或<em>点击上传</em>
        </div>
      </el-upload>
    </el-card>

    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header" style="display: flex;justify-content: space-between;align-items: center;">
        <span>我们的优势</span>
        <span>
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          @click="advantageclick"
        ></el-button>
        <el-button
          type="danger"
          v-show="!advantageinpute_show"
          :icon="'el-icon-plus'"
          circle
          @click="add_advantageclick"
        ></el-button>
        <el-button
        v-show="advantageinpute_show"
          type="success"
          :icon="'el-icon-check'"
          circle
          @click="check_advantageclick"
        ></el-button>
        </span>
      </div>
      <el-input v-model="advantageinpute" v-show="advantageinpute_show"></el-input>

      <!-- card body -->
      <div v-for="(item, index) in MoBodyL" :key="index">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <span  v-show="! item.show">{{ item.content }}</span>
            <!-- @blur="focus_advantage_title(item.id)" -->
            <el-input v-model="item.content"  v-show="item.show" :autofocus="true"></el-input>
            <el-button type="primary" icon="el-icon-edit" circle @click="edit_advantage_title(item.advantageid)" v-if="!item.show"></el-button>
            <el-button type="primary" icon="el-icon-check" circle @click="save_advantage_title(item.advantageid,item.content)" v-else></el-button>
          </div>
        </el-card>
      </div>
    </el-card>

    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header" class="centeritem">
        <span>模式介绍</span>
        <span>
            <el-button
          type="primary"
          :icon="'el-icon-edit'"
          circle
          @click="edit_mode_title"
          v-show="! show_mode_inpute"
        ></el-button>
        <el-button
          type="danger"
          :icon="'el-icon-plus'"
          circle
          @click="add_mode_obj"
          v-show="! show_mode_inpute"
        ></el-button>
        <el-button
            v-show="show_mode_inpute"
          type="success"
          :icon="'el-icon-check'"
          circle
          @click="check_modeclick"
        ></el-button>
        </span>
       
      </div>
      <div v-show="show_mode_inpute">
            <el-input placeholder="输入标题" v-model="title"></el-input>
            <el-input placeholder="输入内容" v-model="content"></el-input>
        </div>
      <div v-for="(item, index) in con_list" :key="index">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
           
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <div v-show="!item.show">{{ item.title }}</div>
            <el-input v-model="item.title" v-if="item.show"></el-input>
            <div>
            <el-button type="primary" icon="el-icon-edit"  v-if="!item.show" @click="edit_mode_soncontent(item.modeid)"></el-button>
            <el-button type="primary" icon="el-icon-check"  v-else @click="save_mode_soncontent(item.modeid,item)"></el-button>
           </div>
          </div>
          <div>
            <div v-show="! item.show">
                {{ item.content }}
            </div>
            <el-input v-model="item.content" v-show="item.show"  type="textarea"></el-input>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
        baseurl:"https://zyc618.mynatapp.cc/",
        imgurl:"",//图片地址
        advantageinpute:"",//我们的优势输入框
        advantageinpute_show:false,
        show_mode_inpute:false,
        modeinpute_show:false,//mode输入框隐藏
        title:"",
        content:"",
      showswiper: [],
      con_list: [
      ],
      MoBodyL: [
        {
            id:1,
          title:
            "转变教育观念，开启智慧成长之旅！我们的指导师将帮助您科学规划，提升教育认知，让孩子能够独立发现、看待、解决问题！",
            show:false
        }
      ],
      show_pic_static:true
    };
  },
  methods: {
    handleAvatarSuccess_img(res, file) {
      if (res.code == 200) {
        this.imgurl = res.data.url;
      }

    },
    //保存图片:
    async save_img(){
        let result = await this.$API.reservation.reqclassdata(this.imgurl);
        if(result.code == 200){
            this.$message({
                message:"保存成功!"
            })
            this.show_pic_static = false;
        }
    },
    show_pic(){
        this.show_pic_static = !this.show_pic_static;
    },
    //编辑我们的优势
    advantageclick(){
        this.$message({
            message:"权限不够!禁止编辑",
            type:"error"
        })
    },
    //显示出输入框
    add_advantageclick(){
        this.advantageinpute_show =! this.advantageinpute_show ;
    },
    //保存输入框的数据,发送服务器
    async check_advantageclick(){
        this.advantageinpute_show = !this.advantageinpute_show;
        let result = await this.$API.reservation.insert_reservation_advantage(this.advantageinpute);
        if(result.code == 200){
            this.$message({
                message:"保存成功!",
                type:"success"
            })
           this.MoBodyL.push({
            advantageid:result.data,
            content:this.advantageinpute,
            show:false
           })
        }
    },
    //编辑每一条数据
    edit_advantage_title(index){
        let index_x = this.MoBodyL.findIndex(item=> item.advantageid == index);
        this.MoBodyL[index_x].show = !this.MoBodyL[index_x].show;
    },
    //失去焦点发起请求:  不发请求
    focus_advantage_title(index){
        let index_x = this.MoBodyL.findIndex(item=> item.advantageid == index);
        this.MoBodyL[index_x].show = false;
    },
    //保存编辑的标题发送服务器:
    async save_advantage_title(index,title){
        let index_x = this.MoBodyL.findIndex(item=> item.advantageid == index);
        this.MoBodyL[index_x].show = false;
        let result = await this.$API.reservation.edit_reservation_advantage({id:index,title});
        if(result.code == 200){
            this.$message({
                message:"编辑成功!",
                type:"success"
            })
          
        }
    },

    //编辑主标题:
    edit_mode_title(){
        this.$message({
            message:"权限不够!禁止编辑",
            type:"error"
        })
    },
    //点击增加按钮
    add_mode_obj(){
        this.show_mode_inpute = true; 
    },
    //mode新标题保存按钮
    async check_modeclick(){
         this.show_mode_inpute = !this.show_mode_inpute;
        //发起请求
        let result = await this.$API.reservation.insert_reservation_mode({
            title:this.title,
            content:this.content
        });
        if(result.code == 200){
            this.$message({
                message:"保存成功!",
                type:"success"
            })
           this.con_list.push({
                modeid: result.data,
                show:false,
                title: this.title,
                content:this.content,
            })
        }
    },
    //mode子标题编辑 保存
    edit_mode_soncontent(index){
        let index_x = this.con_list.findIndex(item=> item.modeid == index);
        this.con_list[index_x].show = true;
        
    },
    async save_mode_soncontent(index,item){
        let index_x = this.con_list.findIndex(item=> item.modeid == index);
        this.con_list[index_x].show = false;
        //发起请求:
        let result = await this.$API.reservation.edit_reservation_mode({
            title:item.title,
            content:item.content,
            id:index
        });
        if(result.code == 200){
            this.$message({
                message:"保存成功!",
                type:"success"
            })
          
        }
    },
    //获取数据:
    async getpageall(){
        let result = await this.$API.reservation.getalldata();
        if(result.code == 200){
            this.con_list =  result.data.con_list;
            this.con_list.forEach(obj =>{
                //主要响应式
                this.$set(obj, 'show', false);
            })
            this.MoBodyL =  result.data.MoBodyL;
            this.MoBodyL.forEach(obj =>{
                //主要响应式
                this.$set(obj, 'show', false);
            })
            console.log(result.data.showswiper[0]);
            this.showswiper.push(this.baseurl+  result.data.showswiper[0].imgurl);
        }
    }
  },
  mounted() {
    this.getpageall()
  },
};
</script>
<style>
.centeritem{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
